<template>
     <div class="heros-con">
        <div class="heros-left">
            <img :src="heroCon.image && `http://cdn.xiaohigh.com${heroCon.image}`" alt="" />
            <h2>{{ heroCon.name }}</h2>
            <h3>{{heroCon.type}}</h3>
            <div class="img-min">
                <ul>
                    <li v-for="(item,index) in heroCon.skills" :key="index">
                        <img :src="`http://cdn.xiaohigh.com${item.img}`" alt="" />
                        <h4>{{item.name}}</h4>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="heros-right">
            <img :src="heroCon.big_image && `http://cdn.xiaohigh.com${heroCon.big_image}`" alt="" />
            <hr />
            <p v-html=" heroCon.intro "></p>
        </div>
    </div>
</template>

<script>
    export default {
        name:"HeroCon",
        data(){
            return{
                heroCon:{}
            }
        },
        async mounted(){
            let {id,name} = this.$route.params;

            let {data} = await this.$axios.get(`http://api.xiaohigh.com/heros/${id}`);
            // console.log(data);
            //赋值
            this.heroCon = data;
        }
        
    }
</script>

<style scoped>

.heros-con{
    width: 90%;
    margin: 20px auto;
    display: flex;
}

.heros-con .heros-left{
    width: 300px;
    height: 500px;
    background: rgb(243, 241, 241);
    text-align: center;
    border-radius: 10px;
}

.heros-con .heros-left ul{
    display: flex;
    flex-wrap: wrap;
}

.heros-con .heros-left li{
    margin: 0 5px;
}

.heros-con .heros-left>img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.heros-con .heros-left .img-min img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.heros-con .heros-right{
    margin-left: 20px;
    width: 70%;
}

.heros-con .heros-right img{
    width: 100%;
    border-radius: 15px;
}

.heros-con .heros-right p{
    line-height: 25px;
    text-indent: 40px;
}


</style>